<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/pages/common/head.jsp" %>
<html>
<head>
    <meta name="description" content=""/>
    <meta name="Keywords" content=""/>
    <script src="${resourceServer }/js/jquery.js"></script>
    <script src="${resourceServer }/js/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js"></script>
</head>
<body>
    <div id="app">
        <%--{{cityJson}}--%>
        <select name="" id="sheng" @change="changesheng()" v-model="selectedsheng">
            <template v-for="sheng in area">
                <option :value="sheng.codeid">
                    {{sheng.cityname}}
                </option>
            </template>
        </select>
        <select name="" id="shi" @change="changeshi()" v-model="selectedshi">
            <template v-for="s in shi"  >
                <option :value="s.codeid">
                    {{s.cityname}}
                </option>
            </template>
        </select>
        <select name="" id="xian">
            <template v-for="x in xian">
                <option :value="x.codeid">
                    {{x.cityname}}
                </option>
            </template>
        </select>
    </div>

    <script>
        var area;
        $.ajax({
            url:"${basepath}/area/show.do",
            type:"get",
            dataType:"json",
            async:false,
            success:function(data){
                area=data;
            }
        });
        new Vue({
            el:'#app',
            data:{
                area:area,
                shi:area[0].children,
                xian:area[0].children[0].children,
                selectedsheng:area[0].codeid,
                selectedshi:area[0].children[0].codeid,
            },
            mounted:function(){
                //this.getCityJson();
            },
            methods:{
//				//获取城市Json数据
//				getCityJson:function(){
//					this.$http.get('http://localhost:8082/back/area/show.do').then(function(response){
//                        console.log(response);
//						var cityData = response.data;
//						console.log(cityData);
//						this.area = cityData;
//					}); // http.get end
//				}//getCityJson end
                changesheng:function(){
                   // alert("changeSheng");
                    for(var i=0;i<this.area.length;i++){
                        if(this.selectedsheng==this.area[i].codeid){
                            this.shi=this.area[i].children;
                            this.selectedshi=this.area[i].children[0].codeid;
                            this.xian=this.area[i].children[0].children;
                            console.log(this.shi);
                            return ;
                        }
                    }
                },
                changeshi:function(){
                    //alert("changeShi");
                    for(var i=0;i<this.shi.length;i++){
                        if(this.selectedshi==this.shi[i].codeid){
                            this.xian=this.shi[i].children;
                            return ;
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>
